<template>
  <div >
    <el-radio-group v-model="radio" style="width:auto; height:40px">
      <el-radio v-model="radio" label="1">小车1</el-radio>
      <el-radio v-model="radio" label="2">小车2</el-radio>
      <el-radio v-model="radio" label="3">小车3</el-radio>
    </el-radio-group>

    <div style="width:300px;height:247.4px;border:solid #8A8A8A;border-radius: 30px">
      <el-button type="info" icon="el-icon-arrow-up" style="margin:10px 109px 0px 109px;font-size:50px" @click="controlMoveDirection('up')"></el-button>
      <el-button type="info" icon="el-icon-arrow-left" style="margin:0px 0px 0px 13.5px; font-size:50px" @click="controlMoveDirection('left')"></el-button>
      <el-button type="info" icon="el-icon-video-pause" style="margin:13.5px; font-size:50px" @click="controlMoveDirection('stop')"></el-button>
      <el-button type="info" icon="el-icon-arrow-right" style="margin:13.5px 0px 0px 0px; font-size:50px" @click="controlMoveDirection('right')"></el-button>
      <el-button type="info" icon="el-icon-arrow-down" style="margin:0px 109px 10px 109px;font-size:50px" @click="controlMoveDirection('down')"></el-button>
    </div>

    <div style="width:800px;margin: 10px 400px 10px">
      <el-tag size="medium" >小车轨迹</el-tag>
    </div>
    <div style="width:1000px;height:600px;border:solid #8A8A8A;border-radius: 30px">
      <canvas id="cvs1"></canvas>

<!--    </div>-->

<!--    <div style="width:800px;margin: 10px 400px 10px">-->
<!--      <el-tag size="medium" >小车2轨迹</el-tag>-->
<!--    </div>-->
<!--    <div style="width:1000px;height:600px;border:solid #8A8A8A;border-radius: 30px">-->
<!--      <canvas id="cvs2"></canvas>-->

<!--    </div>-->

<!--    <div style="width:800px;margin: 10px 400px 10px">-->
<!--      <el-tag size="medium" >小车3轨迹</el-tag>-->
<!--    </div>-->
<!--    <div style="width:1000px;height:600px;border:solid #8A8A8A;border-radius: 30px">-->
<!--      <canvas id="cvs3"></canvas>-->
    </div>


  </div>
</template>


<script>

export default {
  name: 'CarMove',
  data() {
    return {
      car1:'10.0.0.1',//小车1ip
      car2:'10.0.0.2',//小车2ip
      car3:'10.0.0.2',//小车3ip
      radio: '1',
      max_id_car1: "",
      max_id_car2: "",
      max_id_car3: "",
      car1_x:200,
      car1_y:100,
      car2_x:200,
      car2_y:100,
      car3_x:200,
      car3_y:100,
      currentDownDirection: [false,false,false,false],
    }
  },

  created: function() {
    this.getmaxid()// 获取最大id
    let _this = this;
    document.onkeyup = function() {// 起来才调用
      let key = window.event.keyCode;
      _this.monitorKeyUp(key);
    };
    document.onkeydown = function (){// 按下即调用
      let key = window.event.keyCode;
      _this.monitorKeyDown(key);
    }
    this.click()
    // this.initcanvas()
  },

  mounted() {
    // this.initcanvas()
    // this.socket = new WebSocket("ws://172.27.236.76:12345/ws/hj/")
    // this.socket = new WebSocket("ws://192.168.126.166:12345/ws/hj/")

    //  收到消息时触发
    // this.socket.onmessage = function (event) {
    //   console.log(event.data);
    // }
  },

  methods: {
    click () {
      let  timer = setInterval(() => {
        this.fun(timer)
      }, 3000)
    },
    fun (timer) {
      setTimeout(()=>{
        // 这里ajax 请求的代码片段和判断是否停止定时器
        // console.log(timer)
        this.getalltrace()
        // 如需要停止定时器，只需加入以下：
        // clearInterval(timer)
      }, 0)
    },
    //  鼠标点击
    controlMoveDirection(keyValue) {
      console.log(keyValue)//keyValue值有left right up down
    },
    //  监听键盘按下
    monitorKeyDown(key) {//  按键与之前不同，发送停止信息，更新按键
      if (key === 87) {//w  上
        if (this.currentDownDirection[0] === false){//  之前没有按下,发送报文，记录
          this.currentDownDirection[0] = true;
          this.sendingCarMoveMessage("up");
        }
      } else if (key === 83) {//s  下
        if (this.currentDownDirection[1] === false){//  之前没有按下,发送报文，记录
          this.currentDownDirection[1] = true;
          this.sendingCarMoveMessage("down");
        }
      }else if (key === 65) {//a  左
        if (this.currentDownDirection[2] === false){//  之前没有按下,发送报文，记录
          this.currentDownDirection[2] = true;
          this.sendingCarMoveMessage("left");
        }
      }
      else if (key === 68) {//d  右
        if (this.currentDownDirection[3] === false){//  之前没有按下,发送报文，记录
          this.currentDownDirection[3] = true;
          this.sendingCarMoveMessage("right");
        }
      }
    },
    //  监听键盘起来
    monitorKeyUp(key) {
      if (key === 87) {//w  上
        if (this.currentDownDirection[0] === true){//  之前按下,发送报文，记录
          this.currentDownDirection[0] = false;
          this.sendingCarMoveMessage("up stop");
        }
      } else if (key === 83) {//s  下
        if (this.currentDownDirection[1] === true){//  之前没有按下,发送报文，记录
          this.currentDownDirection[1] = false;
          this.sendingCarMoveMessage("down stop");
        }
      }else if (key === 65) {//a  左
        if (this.currentDownDirection[2] === true){//  之前没有按下,发送报文，记录
          this.currentDownDirection[2] = false;
          this.sendingCarMoveMessage("left stop");
        }
      }
      else if (key === 68) {//d  右
        if (this.currentDownDirection[3] === true){//  之前没有按下,发送报文，记录
          this.currentDownDirection[3] = false;
          this.sendingCarMoveMessage("right stop");
        }
      }
    },
    //  发送信息
    sendingCarMoveMessage(direction){// 上下左右停
      let car = this.car1;
      if (this.radio === '2'){
        car = this.car2
      }

      this.request.get("/api/car_move", {
        params: {
          direction: this.currentDownDirection.toString(),
          carIP: car,
        }
      }).then(res => {})
    },
    //  获取当前最大id
    getmaxid(){
      this.request.get("/api/car_max_id?carIP=" + this.car1).then(res => {
        this.max_id_car1 = res.max_id
        console.log('car1',this.max_id_car1)
      })

      this.request.get("/api/car_max_id?carIP=" + this.car2).then(res => {
        this.max_id_car2 = res.max_id
        console.log('car2',this.max_id_car2)
      })
      this.getalltrace()
    },

    //  获取当前小车的所有轨迹 并画图
    getalltrace(){
      let trace_list = [];
      this.request.get("/api/trace_record" , {
        params: {
          carIP: this.car1,
          // max_id: 100,
          max_id: this.max_id_car1,
          // car: this.radio,
        }
      }).then(res => {
        let that = this
        //  一个list 通过下标访问
        trace_list = res.trace_list
        console.log(trace_list)
        var canvas = document.getElementById('cvs1');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.beginPath();
          ctx.moveTo(this.car1_x,this.car1_y);
          ctx.strokeStyle = '#8A8A8A'
          ctx.lineWidth = '1'
          // console.log(trace_list[0].id)
          //  长度
          // console.log(trace_list.length)
          for (let i = 0; i < trace_list.length; i++){
            this.car1_x = this.car1_x + trace_list[i].x
            this.car1_y = this.car1_y + trace_list[i].y
            ctx.lineTo(this.car1_x,200 - this.car1_y);
            console.log(trace_list[i].id,this.car1_x,this.car1_y);
            ctx.stroke();
            this.max_id_car1 = trace_list[i].id
          }
        }
      })


      this.request.get("/api/trace_record" , {
        params: {
          carIP: this.car2,
          max_id: this.max_id_car2,
          // car: this.radio,
        }
      }).then(res => {
        let that = this
        //  一个list 通过下标访问
        trace_list = res.trace_list
        console.log(trace_list)
        var canvas = document.getElementById('cvs2');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.beginPath();
          ctx.moveTo(this.car2_x,this.car2_y);
          ctx.strokeStyle = '#8A8A8A'
          ctx.lineWidth = '1'
          // console.log(trace_list[0].id)
          //  长度
          // console.log(trace_list.length)
          for (let i = 0; i < trace_list.length; i++){
            this.car2_x = this.car2_x + trace_list[i].x
            this.car2_y = this.car2_y + trace_list[i].y
            ctx.lineTo(this.car2_x,200 - this.car2_y);
            console.log(trace_list[i].id,this.car2_x,this.car2_y);
            ctx.stroke();
            this.max_id_car2 = trace_list[i].id
          }
        }
      })
    }
  }
}

</script>

<style>
#cvs1,#cvs2 {
  /*position: absolute;*/
  top: 10px;
  left: 10px;
  width: 1000px;
  height: 600px;
  /*border: 2px dashed green;*/
}

</style>